<link rel="stylesheet" href="views/utils/zoom.css"/>
<h3>外部放大器</h3>
<div class="outer-zoom">
  <div class="small">
    <img ng-src="images/small.jpg" alt="试验图片"
         sc-resize="vm.zoom.active.resize(width, height)"/>

    <div class="small-view" sc-position="vm.zoom.activeView"></div>
    <div class="overlay" ng-mousemove="vm.zoom.activeView.centerTo($event.offsetX, $event.offsetY)"></div>
  </div>
  <div class="large-view" sc-resize="vm.zoom.passiveView.resize(width, height)">
    <img ng-src="images/large.jpg" alt="大图" sc-resize="vm.zoom.passive.resize(width, height)"
         sc-position="{x: vm.zoom.passive.x, y: vm.zoom.passive.y}" />
  </div>
</div>
<h3>内部放大器</h3>
<div class="inner-zoom" sc-resize="vm.zoom1.passiveView.resize(width, height)">
  <img class="large" ng-src="images/large.jpg" alt="大图" sc-resize="vm.zoom1.passive.resize(width, height)"
       sc-position="{x: vm.zoom1.passive.x, y: vm.zoom1.passive.y}" />
  <div class="eagle-eye">
    <img class="small" ng-src="images/small.jpg" alt="试验图片"
         sc-resize="vm.zoom1.active.resize(width, height)"/>
    <div class="small-view" sc-position="vm.zoom1.activeView"></div>
    <div class="overlay" ng-mousemove="vm.zoom1.activeView.centerTo($event.offsetX, $event.offsetY)"></div>
  </div>
</div>
<!--<h3>鹰眼</h3>-->
<!--<div class="eagle-eye-zoom" >-->
  <!--<img class="large" ng-src="images/large.jpg" alt="大图" sc-resize="vm.zoom3.active.resize(width, height)" />-->
  <!--<div class="eagle-eye">-->
    <!--<img class="small" ng-src="images/small.jpg" alt="试验图片"-->
         <!--sc-resize="vm.zoom3.passive.resize(width, height);vm.zoom3.activeView.resize(width, height)"/>-->
    <!--<div class="small-view" sc-position="vm.zoom3.passiveView"></div>-->
  <!--</div>-->
  <!--<div class="overlay" ng-mousemove="vm.zoom3.activeView.centerTo($event.offsetX, $event.offsetY)"></div>-->
<!--</div>-->
<h3>说明</h3>
这里没有使用单一的大型指令去实现，而是遵循Angular的风格，实现了两个单一功能的小指令：resize和position（可在右侧查看源码）。
<br/>
它们用来和DOM做必要的交互，然后通过Zoom类和Rect类来实现大小图之间的映射。这种实现方式非常灵活，所以实现两种风格的放大器都不需要额外代码。